<template>
  <div class="calculator">
      <my-head title="小荷计算器" :go="true" :ri="false"></my-head>
      <div class="main">
        <div class="money" v-for="(item,index) in list" :key="index">
          <span>{{item.name}}</span><span><input type="number" v-model="item.price" style="outline:none" :placeholder="item.placeholder"></span><span>{{item.dw}}</span>
        </div>
        <div class="fangshi">回款方式</div>
        <div class="lixi">
          <span v-for="(item,index) in toptypes"
                :key="index"
                @click="toggle(item.id)"
                :class="{active:item.id===currentId}"
          >
            {{item.type}}
          </span>
        </div>
        <button @click="suan()">计算</button>
        <div class="jisuan">
          <p>预计收益</p>
          <p class="shouyi">{{this.num}}</p>
          <p>本息合计：{{this.benxi}}</p>
          <p>每月本息明细(共{{this.yue}}月)</p>
        </div>
        <table class="shuju">
          <thead>
            <th>期数</th>
            <th>本金</th>
            <th>利息</th>
            <th>合计</th>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>{{this.list[0].price}}</td>
              <td>{{this.num}}</td>
              <td>{{this.benxi}}</td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>
</template>

<script>
import Head from "@/components/Head"
export default {
    data(){
      return{
        list:[
          {name:"投资金额",placeholder:"请输入投资金额",dw:"元",price:""},
          {name:"年利率化",placeholder:"请输入年利率化",dw:"%",price:""},
          {name:"投资期限",placeholder:"请输入时间",dw:"月",price:""}
        ],
        currentId:1002,
        toptypes:[
            {id:1001,type:'每月付息'},
            {id:1002,type:'到期本息'},
            {id:1003,type:'等额本息'}
        ],
        num:'0.00',
        benxi:'0.00',
        yue:'0'
      }
    },
    methods:{
     toggle(num){
        console.log(num)
        num && (this.currentId=num)
      },
      suan(){
        this.num = Math.round(this.list[0].price*this.list[1].price*this.list[2].price/12)/100;
        this.benxi = +this.list[0].price + +this.num;
        this.yue = this.list[2].price;
      }
    },
    components:{
        myHead:Head
    }
}
</script>

<style scoped>
  .calculator{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .main{
    border-top: 1px solid #ccc;
    background: #fff;
  }
  .main .money{
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 0.19rem 0;
  }
  .main .money span{
    display: flex;
    /* flex: 1; */
    padding-left: 0.2rem;
  }
  .main .money span input{
    flex: 1;
    border: none;
    width: 2rem;
  }
  .main .fangshi{
    padding: 0.2rem 0.2rem;
  }
  .main .lixi{
    display: flex;
  }
  .main .lixi span{
    font-size: 0.14rem;
    color: #ccc;
    border: 1px solid #ccc;
    text-align: center;
    padding: 0.05rem 0.1rem;
    margin-left:0.4rem;
    border-radius: 10px;
  }
  .main .lixi .active{
    color: orange;
    border: 1px solid orange;
  }
  .main button{
    border: 1px solid orange;
    background: orange;
    color: #fff;
    margin-top: 0.1rem;
    padding:0.05rem 0.3rem;
    margin-left: 40%;
  }
  .main .jisuan{
    margin-top: 0.08rem;
    border-top: 0.08rem solid #f4f4f4;
  }
  .main .jisuan p{
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding-top: 0.2rem;
    color: #ccc;
    font-size: 0.14rem;
  }
  .main .jisuan .shouyi{
    font-size: 0.24rem;
    color: #f00;
  }
  .main .shuju{
    width: 100%;
    flex: 1;
    color: #818181;
  }
  .main .shuju thead{
    background: #f4f4f4;
  }
  .main .shuju thead>th{
    padding: 0.1rem 0;
  }
  .main .shuju tbody{
    text-align: center;
  }
  .main .shuju tbody>tr>td{
    padding: 0.1rem 0;
  }
</style>
